<template>
	<view class="container">
		<!-- 订单金额信息 -->
		<view class="order-info">
			<view class="header">
				<div>
					<image :src="listData.subUserAvatar" alt="" class="userImg" />
				</div>
				<div style="margin-left: 40rpx; flex: 2">
					<text class="name">{{ listData.subUserName || '' }}（{{ listData.subUserPhone || '' }}）</text>
					<text class="time">最近下单时间：{{ listData.lastTimeStr || '' }}</text>
				</div>
				<!-- <uni-icons type="right" size="16" style="float: right;"></uni-icons> -->
			</view>
			<div class="info-content">
				<view class="info-item" style="flex: 4">
					<text class="label">待结算订单金额（元）</text>
					<text class="value">{{ listData.pendingSettlementPrice || 0 }}</text>
				</view>
				<view style="border-left: 1px solid #EFEFEF;height: 20rpx;padding:15rpx;margin-bottom:50rpx">
				</view>
				<view class="info-item" style="flex: 3">
					<text class="label">待结算订单数</text>
					<text class="value">{{ listData.pendingSettlementCount || 0 }}</text>
				</view>
			</div>
			<div class="info-content">
				<view class="info-item" style="flex: 4">
					<text class="label">已结算订单金额（元）</text>
					<text class="value">{{ listData.alreadySettlementPrice || 0 }}</text>
				</view>
				<view style="border-left: 1px solid #EFEFEF;height: 20rpx;padding:15rpx;margin-bottom:50rpx"></view>
				
				<view class="info-item" style="flex: 3">
					<text class="label">已结算订单数</text>
					<text class="value">{{ listData.alreadySettlementCount || 0 }}</text>
				</view>
			</div>
			<div class="line"></div>
			<text class="info-title" @click="handleToUrl(`/mineComponentPackage/component/friend/records?subUserId=${subUserId}`)">订单收益记录 ></text>
		</view>

		<!-- 订单收益记录 -->
		<view class="order-record">
			<div class="order-record-label">荷友关系</div>
			<div v-if="listData.status == 1">
				<view class="record-item">
					<text class="label">关注时间：</text>
					<text class="value">{{ listData.followDateStr || '' }}</text>
				</view>
				<view class="record-item">
					<text class="label">保护期剩余</text>
					<text class="value">{{ listData.protectDays || 0 }}</text>
				</view>
				<view class="record-item">
					<text class="label">有效期剩余</text>
					<text class="value">{{ listData.effectiveDays || 0 }}</text>
				</view>
			</div>
			<div v-else>
				<view class="record-item">
					<text class="label">关注时间：</text>
					<text class="value">{{ listData.followDateStr || '' }}</text>
				</view>
				<view class="record-item">
					<text class="label">取关时间</text>
					<text class="value">{{ listData.expirationDateStr || 0 }}天</text>
				</view>
				<view class="record-item">
					<text class="label">取关原因</text>
					<text class="value">{{ listData.expirationReason || '' }}</text>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			listData: {
				alreadySettlementCount: 0,
				alreadySettlementPrice: 0,
				effectiveDays: 0,
				expirationDateStr: '1',
				expirationReason: '2',
				followDateStr: '3',
				lastTimeStr: '4',
				pendingSettlementCount: 0,
				pendingSettlementPrice: 0,
				protectDays: 0,
				status: 0,
				subUserAvatar: '5',
				subUserId: '6',
				subUserName: '7',
				subUserPhone: '8'
			},
			subUserId: null
		};
	},
	onLoad(option) {
		// option.subUserId
		this.subUserId = option.subUserId;
		this.initData();
	},
	methods: {
		handleToUrl(url) {
			uni.navigateTo({
				url
			});
		},
		initData() {
			uni.showLoading({
				title: '加载中'
			});
			this.$post(`/yahe/promotion/lotus/detail`, { subUserId: this.subUserId }, '1').then((res) => {
				if (res.success) {
					this.listData = res.content || {};
				} else {
					this.$toast(res.message, 'none');
				}
			});
		}
	}
};
</script>

<style>
/* 全局样式 */
.container {
	padding: 24rpx;
	background-color: #f5f5f5;
	height: 100%;
	box-sizing: border-box;
}

/* 头部样式 */
.header {
	display: flex;
	align-items: center;
	margin-bottom: 52rpx;
}

.header .name {
	display: block;
	margin-bottom: 16rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #3a3a3a;
}

.header .time {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
	line-height: 28rpx;
}

/* 订单信息样式 */
.order-info {
	background-color: #fff;
	padding: 16px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.info-item {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 50rpx;
}

.info-item .label {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #6d6d6d;
}

.info-item .value {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: bold;
	font-size: 30rpx;
	color: #3a3a3a;
	margin-top: 10rpx;
}

/* 订单收益记录样式 */
.order-record {
	background-color: #fff;
	padding: 24rpx;
	border-radius: 8px;
}

.order-record .title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
	display: block;
}

.record-item {
	display: flex;
	justify-content: space-between;
	padding: 18rpx 0rpx;
}

.record-item .label {
	color: #6d6d6d;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #6d6d6d;
}

.record-item .value {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #3a3a3a;
}

.info-title {
	display: flex;
	justify-content: center;
	margin: 22px 0px 20px 0px;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 28rpx;
	color: #0a978e;
}

.info-content {
	display: flex;
	align-items: center;
}

.line {
	width: 100%;
	border-top: 1rpx solid #efefef;
}

.order-record-label {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: bold;
	font-size: 28rpx;
	color: #3a3a3a;
	margin-bottom: 15rpx;
}

.userImg {
	width: 80rpx;
	height: 80rpx;
	background: #d9d9d9;
	border-radius: 80rpx;
}
</style>
